<template>
  <div>
    <div class="account-item-wrap">
      <el-row>
        <el-col :span="20">
          <div class="img-name-brief">
            <el-image
              :src="
                userUrl(focusItem.toUserAvatar)
                  ? userUrl(focusItem.toUserAvatar)
                  : defalutAvatar
              "
              fit="cover"
            ></el-image>
            <div class="name-brief">
              <div class="name">{{ focusItem.toNickname }}</div>
              <div class="brief">
                {{ focusItem.description ? focusItem.description : "暂无简介" }}
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="focus-wrap">
            <div :class="['focus', isFocus ? 'isFocus' : '']">
              <template v-if="!isFocus">
                <i class="el-icon-plus"></i> 关注</template
              >
              <template v-else> 已关注</template>
            </div>
            <div class="more-operate">
              <el-dropdown
                @command="clickMoreMenu(focusItem)"
                placement="bottom-start"
              >
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="focus">{{
                    isFocus ? "取消关注" : "关注"
                  }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import config from "@/config/index";

export default {
  props: ["focusItem"],
  data() {
    return {
      // 默认头像
      defalutAvatar: config.defalutAvatar,
      // 已关注
      isFocus: true,
    };
  },
  methods: {
    // 用户的头像
    userUrl(userUrl) {
      if (!userUrl) return null;
      // 用户的头像加地址前缀
      return config.defalutBaseURLPic + userUrl;
    },
    // 点击更多操作图标 取消关注
    async clickMoreMenu() {
      await this.focusArticle();
      this.isFocus = !this.isFocus;
    },
    // 关注、取消关注博主
    async focusArticle() {
      let method = "add";
      if (this.isFocus) {
        method = "delete";
      } else {
        method = "add";
      }
      // 更新到数据库
      const { code } = await this.$http.get("/api/user/relation", {
        params: {
          action: method,
          toUserId: this.focusItem.followId,
        },
      });
      if (code != 200) {
        return this.$showMsg({ msg: "操作失败！", type: "error" });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.account-item-wrap {
  background-color: white;
  padding: 20px;
  border-bottom: rgb(240, 240, 240) 1px solid;
  .img-name-brief {
    text-align: left;
    display: flex;
    .el-image {
      width: 60px;
      max-height: 60px;
      border-radius: 50%;
    }
    .name-brief {
      margin-left: 10px;
      .name {
        font-size: 14px;
        color: #333;
        font-weight: 550;
        margin-bottom: 2px;
      }
      .brief {
        font-size: 14px;
        color: #939393;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .focus-wrap {
    margin-top: 10px;
    display: flex;
    align-items: center;
    .focus {
      max-width: 60px;
      border: 1px #ff8200 solid;
      color: #ff8200;

      padding: 8px 10px;
      border-radius: 20px;
      font-size: 12px;
      margin-right: 5px;
    }
    .more-operate {
      .el-dropdown-link {
        .el-icon-arrow-down {
          cursor: pointer;
        }
      }
    }
    .isFocus {
      border: 1px #333 solid;
      color: #333;
    }
  }
}
</style>